<template>
  <div class="con">
    <el-container>
      <el-main style="padding:0;">
        <!-- 充值提现 -->
        <div class="contbox6_10">
          <p class="titlelist6_10">
            账户管理
            <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>充值管理
          </p>
          <div class="content">
          <div class="sousuojg6_10">
            <el-form :model="formInline" label-width="100px">
              
              <el-form-item label="机构ID">    
                <el-input
                  v-model="officeName"
                  @focus="selectInstitution"
                  placeholder="请输入机构ID"
                ></el-input>
              </el-form-item>
              <el-form-item label="机构名称">
                <el-input
                  v-model="formInline.officeName"
                  placeholder="请输入机构名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="订单号">
                <el-input
                  v-model="formInline.channelOrderCode"
                  placeholder="请输入订单号"
                ></el-input>
              </el-form-item>
              <el-form-item label="账户类型">
                <el-select
                  v-model="formInline.channelType"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="提现" value="1"></el-option>
                  <el-option label="充值" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="账户号码">
                <el-input
                  v-model="formInline.accountNo"
                  placeholder="请输入订单号"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="formInline.status"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="审核成功" value="0"></el-option>
                  <el-option label="失败" value="1"></el-option>
                  <el-option label="待审核" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发起时间">
                <el-date-picker
                  v-model="dataTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="审核时间">
                <el-date-picker
                  v-model="dataTime1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
              <!-- <el-col style="display:flex;margin-left:20px">  -->
                <!-- <el-form-item label="累计充值：">  {{ fromData.totalAmt }} 元 </el-form-item>
                <el-form-item label="今日充值：">{{ fromData.dayAmt }} 元</el-form-item>
                <el-form-item label="账户余额："> {{ fromData.dayAmt }} 元</el-form-item> -->
         
            <!-- </el-col> -->
            </el-form>
          </div>
          <div class="buttons">
            <el-button
                  type="primary"
                  @click="queryPayActiveList"
                  >搜索</el-button
                >
                <el-button
                  type=""
                  @click="reset"
                  >重置</el-button
                >
                <el-button
            @click="payActiveListExport"
            class="butt"
            style="margin-left:40px"
            type="primary"
            v-if="totalNum>0"
          >
            批量导出
          </el-button>
          </div>
          <div class="line" style="display:flex;margin-left:20px;float:left"> 
            <span>累计充值： {{ fromData.totalAmt }} 元</span>
            <span>今日充值： {{ fromData.dayAmt }} 元</span> 
            <span>账户余额：{{ fromData.dayAmt }} 元</span>
          </div>
          <el-table
            :data="tableData"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px'}"
            style="width: 98%;margin-top:20px;margin-bottom: 20px; margin-left: 20px;"
            :v-loading="listLoading"
            ref="multipleTable"
          >
            <el-table-column
              type="selection"
              
              min-width="40"
            ></el-table-column>
            <el-table-column
              prop="officeUid"
              show-overflow-tooltip
              min-width="250"
              label="机构ID"
            ></el-table-column>
            <el-table-column
              prop="officeName"
              show-overflow-tooltip
              min-width="160"
              label="机构名称"
            ></el-table-column>
            <el-table-column
              prop="channelOrderCode"
              show-overflow-tooltip
              min-width="180"
              label="订单号"
            ></el-table-column>
            <el-table-column
              prop="money"
              show-overflow-tooltip
              min-width="200"
              label="订单金额"
            ></el-table-column>
            <el-table-column
              prop="serviceMoney"
              show-overflow-tooltip
              min-width="120"
              label="手续费"
            ></el-table-column>
            <el-table-column
              prop="bankChannelName"
              show-overflow-tooltip
              min-width="120"
              label="充值通道"
            ></el-table-column>
            <el-table-column
              prop="bankName"
              show-overflow-tooltip
              min-width="250"
              label="账户银行"
            ></el-table-column>
            <el-table-column
              prop="bankAccountCode"
              show-overflow-tooltip
              min-width="180"
              label="账户号码"
            ></el-table-column>
            <el-table-column
              prop="createDate"
              show-overflow-tooltip
              min-width="250"
              label="发起时间"
            ></el-table-column>
            <el-table-column
              prop="auditDate"
              show-overflow-tooltip
              min-width="250"
              label="审核时间"
            ></el-table-column>
            <el-table-column  min-width="140" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">成功</span>
                <span v-if="scope.row.status == 1">失败</span>
                <span v-if="scope.row.status == 2">待审核</span>
              </template>
            </el-table-column>
            <!-- <el-table-column  min-width="140" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="doRechargeDetail(scope.row.channelOrderCode)">查看</el-button>
          </template>
        </el-table-column> -->
          </el-table>
          <div style="font-size: 16px;margin-top: 30px">
          
          <el-pagination
            background
            style="text-align: right;"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.page"
            :page-size="formInline.number"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[20, 50, 100]"
            :total="totalNum"
          ></el-pagination>
        </div></div></div>
      </el-main>

      <!-- 查看弹框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleCloses"
        append-to-body
        :close-on-click-modal="false"
      >
        <p class="status" v-if="this.detailsData.status == 0">
          <i class="el-icon-warning color"></i>充值完成
        </p>
        <!-- <p class="status" ><i class="el-icon-warning color"></i>审核</p> -->
        <p class="status" v-if="this.detailsData.status == 2">
          <i class="el-icon-warning color"></i>待处理充值订单
        </p>
        <!-- <p class="status" ><i class="el-icon-warning color"></i>审核</p> -->
        <p class="status" v-if="this.detailsData.status == 1">
          <i class="el-icon-warning color"></i>充值失败
        </p>
        <!-- <p class="status" ><i class="el-icon-warning color"></i>审核</p> -->

        <!-- 充值 -->
        <div class="money">
          <!-- <p>充值账户：支付宝</p> -->
          <p>
            充值账户：{{ this.detailsData.bankChannel == 1 ? "对公" : "对私" }}
          </p>
          <p>结算账户名：{{ this.detailsData.bankAccountName }}</p>
          <p>结算账户：{{ this.detailsData.bankAccountCode }}</p>

          <p>开户行：{{ this.detailsData.bankName }}</p>
          <p>开户支行：{{ this.detailsData.openBank }}</p>
          <p>充值金额：{{ this.detailsData.money }}元</p>
          <!-- <p>充值金额：{{this.detailsData.realityMoney}}元</p> -->
          <p>
            <img class="img" :src="this.detailsData.imgUrl" alt />
          </p>
          <br />
          <p>
            <el-radio
              v-if="this.detailsData.status != 1"
              :disabled="this.detailsData.status != 2"
              v-model="radio"
              label="0"
              >审核通过</el-radio
            >
            <el-radio
              v-if="this.detailsData.status != 0"
              :disabled="this.detailsData.status != 2"
              v-model="radio"
              label="1"
              >审核不通过</el-radio
            >
          </p>
          <br />
          <!-- <p>本次充值金额：{{this.detailsData.money}}元</p> -->
          <p>
            <el-input
              :disabled="this.detailsData.status != 2"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>
          </p>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
          v-if="this.detailsData.status == 2"
        >
          <el-button type="primary" @click="doRechargeAuditing"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-container>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import qs from 'qs'
import Tree from "../tree/index"
export default {
  data() {
    return {
      showType:false,
      channelType: 1,
      listLoading: false,
      status: 2,
      dialogVisible: false,
      radio: '',
      textarea: '',
      officeName:"",
      checkedAll: false,
      formInline: {
        oemUid: localStorage.getItem('jurisdiction') == 0 ? localStorage.getItem('uid') : '',
        officeUid: localStorage.getItem('jurisdiction') == 2 ? localStorage.getItem('uid') : '',
        officeCode: '',
        officeName: '',
        channelOrderCode: '',
        channelType: '',
        accountNo: '',
        status: '',
        startDate: '',
        endDate: '',
        auditStartDate: '',
        auditEndDate: '',
        page: 1,
        number: 20
      },
      fromData: {
        totalAmt: '0.00',
        dayAmt: '0.00',
      },
      dialogTableData: [],
      dataTime: [],
      dataTime1: [],
      eventShow: false,
      machinesShow: false,
      listLoading: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: '',
      channelOrderCode: '',
      detailsData: {
        status: ''
      }
    };
  },
  components: {
    Tree
  },
  mounted () {
    this.queryPayActiveList()
  },
  methods: {
     // 重置
    reset() {
      this.officeName = ""
      this.formInline.officeName = "";
      this.formInline.channelOrderCode = "";
      this.formInline.channelType = "";
      this.formInline.accountNo = "";
      this.formInline.status = "";
      this.formInline.page=1
      this.formInline.startDate = "";
      this.formInline.endDate = "";
      this.formInline.auditStartDate = "";
      this.formInline.auditEndDate = "";
      this.formInline.officeUid = "";
      this.mechanism = "";
      this.dataTime = [];
      this.dataTime1=[]
      this.queryPayActiveList()
    },

   //这里开始
    transmit(data){
      console.log(data.uid)
      //归属机构的uid
      this.formInline.officeCode = data.uid;
      //归属机构名字
      this.officeName = data.name
    },
    //设置取消的
    determine(){
      // alert("执行")
      this.showType=false
    },

    selectInstitution(){
      this.showType=true
    },
    //这里结束


    doRechargeAuditing () {
      this.listLoading = true
      let pl = {
        channelOrderCode: this.channelOrderCode,
        status: this.radio,
        remarks: this.textarea
      }
      https.doRechargeAuditing(pl).then(res => {
        if (res.data.code !== '0000') {
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
           layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          this.listLoading = false
          return
        }
        this.dialogVisible = false
        this.queryPayActiveList()
        this.textarea = ''
         layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
        // this.$notify({title: "成功",message: res.data.ms,type: "success"});
        this.listLoading = false
      })
    },
    doRechargeDetail (channelOrderCode) {
      this.channelOrderCode = channelOrderCode
      this.listLoading = true
      https.doRechargeDetail({channelOrderCode:channelOrderCode}).then(res => {
        if (res.data.code !== '0000') {
           layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.detailsData = res.data.dowithdrawReponse
        this.radio = this.detailsData.status
        this.textarea = this.detailsData.remarks
        this.dialogVisible = true
        this.listLoading = false
      })
    },
    handleCloses () {
      this.textarea = ''
      this.dialogVisible = false
    },
    queryPayActiveList () {
      this.listLoading = true
      if (this.dataTime === null) this.dataTime = []
      this.formInline.startDate = this.dataTime[0]
      this.formInline.endDate = this.dataTime[1]
      if (this.dataTime1 === null) this.dataTime1 = []
      this.formInline.auditStartDate = this.dataTime1[0]
      this.formInline.auditEndDate = this.dataTime1[1]
      https.queryRechargelist(this.formInline).then(res => {
        if (res.data.code !== '0000') {
           layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.tableData = res.data.dowithdrawReponse.list
        this.fromData = res.data.dowithdrawReponse
        if (this.fromData.totalAmt == undefined) this.fromData.totalAmt = '0.00'
        if (this.fromData.dayAmt == undefined) this.fromData.dayAmt = '0.00'
        this.totalNum = res.data.total
        this.listLoading = false
      })
    },
    payActiveListExport() {
      // window.location.href = this.GLOBAL.httpurl + `/api/account/earnDetail/excel/export?${qs.stringify(this.formInline)}`;
     let that = this;
        that.axios({
          method: 'POST',
          url: 'api/account/earnDetail/excel/export',
          headers: {'Content-Type': 'application/json;charset=utf-8'},
          data: that.formInline,
          responseType: 'arraybuffer'
        }).then(res => {
          let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8"});
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          let date = new Date();
          link.download = "充值管理列表" + date.getFullYear()+ (date.getMonth() < 10 ? '0' + date.getMonth() : date.getMonth())+ (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())  + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())  + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())  + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
          link.click();
        }).catch((e) => {
        })
    },
    handleSizeChange(val) {
      this.formInline.number = val; //动态改变
      this.queryPayActiveList()
    },
    handleCurrentChange(val) {
      this.formInline.page = val; //动态改变
      this.queryPayActiveList()
    },
     /**
       * @Author： Zhu Liang Fu
       * @Date：2020/7/15
       * @annotation: 全选
       **/
      selAll() {
        if (this.checkedAll) {
          this.tableData.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
  }
};
</script>
<style scoped>
.line > span{
  margin-left: 20px;
  width:330px
}
.con{
  position: relative;
}
.img {
  display: block;
  width: 75%;
  height: 200px;
  border: 1px solid #ccc;
  margin: 20px auto;
}
.money p {
  width: 100%;
  line-height: 40px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 80px;
  font-size: 14px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  float: right;
}

.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}
</style>
